<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在线OJ</title>
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <!-- <script src="js/bootstrap.min.js"></script>-->
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h3 style="text-align: center;margin-bottom: 50px;">题目列表</h3>
    <div style="float: left;">
    </div>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>序号</th>
            <th>题目</th>
            <th>难度</th>
            <th>答题</th>
        </tr>
        <tbody id="info">
                
        </tbody>
    </table>

</div>
<script>
    let parent = document.querySelector("#info");
        $.ajax({
            url:"oj/select",
            type:"get",
            success: function(data){
                console.log("进入 success 函数" + data.status)
                buildBlogs(data.body);
            },
            // error: function(data,status){
            //     console.log("进入error函数" + status);
            //     location.assign("login.html");
            // }
        })
        //根据响应中的数据,构造html
        function buildBlogs(data){
            //遍历这个data
            for(let blog of data){
                //blog就是一个json对象
                // let blogId = document.createElement("div");
                // blogId.innerHTML = blog.blogId;
                // parent.appendChild(blogId);
                let tr = document.createElement("tr");
                parent.appendChild(tr);
                let order = document.createElement("th");
                order.innerHTML = blog.id;
                tr.appendChild(order);
                let title = document.createElement("th");
                title.innerHTML = blog.title;
                tr.appendChild(title);
                let level = document.createElement("th");
                level.innerHTML = blog.level;
                tr.appendChild(level);
                let a1 = document.createElement("a");
                a1.className = "btn btn-default btn-sm";
                a1.innerHTML = "进入答题";
                a1.href = "listOne.html?id=" + blog.id;
                tr.appendChild(a1);
            }
        }
</script>
</body>

</html>
